//它像网站的「导航菜单」，控制用户访问不同页面时显示什么内容。比如：
//
// 访问 / 会自动跳转到 /manager/home
// 访问 /manager/home 显示主页内容
// 访问 /manager/admin 显示管理页内容
// 访问不存在的页面（如 /abc）会显示 404 页面

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  //路由模式
  //作用：让 URL 看起来像普通网站（如 /about），而不是带 # 的奇怪地址（如 /#/about）
  //类比：就像把房间号从 房间#101 改成 房间101
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
      //重定向
      //作用：访问首页时自动跳转到后台管理系统的主页
    // 类比：进小区大门后自动带你到电梯口
    { path: '/', redirect: '/manager/home'},

      //嵌套路由
    { path: '/manager', component: import('../views/Manager.vue'),
      //作用：在 Manager.vue 页面里显示子页面内容
      // 类比：
      // 父页面 = 办公室大门（固定显示导航栏和侧边栏）
      // 子页面 = 办公室内的不同工位（切换时只换中间内容区）
      children:[
        { path: 'home', component: import('../views/Home.vue'),},
        { path: 'admin', component: import('../views/Admin.vue'),},
      ]
    },

      //404,把所有错误地址（如 /asdfghjkl）导向 404 页面
      //精确匹配 /notFound
    { path: '/notFound', component: import('../views/404.vue'),},
      //通配符匹配所有未定义的路径（如 /abc、/user/123）
    { path: '/:pathMatch(.*)', redirect: '/notFound',},

  ],
})

export default router
